/**
 * 品牌页型体弹框组件
 */
<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useModelStore } from '@/stores/brand'

const route = useRoute()
const brand = ref(route.query.brand)

const modelStore = useModelStore()

const model_no = ref('')
const modelList = ref([])

function beforeOpen() {
  model_no.value = ''
}

function afterClose() {
  model_no.value = ''
}

watch(model_no, () => {
  modelList.value = modelStore.getData().filter(item => item.model_no.includes(model_no.value.toUpperCase())).slice(0, 66)
})

onMounted(() => {
  let timer = setInterval(() => {
    if (modelList.value.length === 0) {
      modelList.value = modelStore.getData().slice(0, 66)
    } else {
      clearInterval(timer)
    }
  }, 1000)
})
</script>

<template>
  <div id="brand-model-popup">
    <el-dialog
      v-model="modelStore.isShow"
      :title="'型体数据' + (brand ? '（' + brand + '）' : '')"
      top="5vh"
      width="70vw"
      center
      @open="beforeOpen"
      @closed="afterClose"
    >
      <div class="model-search">
        <el-input
          v-model="model_no"
          size="large"
          placeholder="请输入型体编号"
          style="font-size: 2vh; font-weight: normal; width: 50%; margin-right: 2%; margin-bottom: 2%;"
        ></el-input>
      </div>

      <div v-show="modelList.length > 0" class="model-option">
        <TransitionGroup name="fade">
          <RouterLink
            v-for="model in modelList"
            :key="model.model_no"
            :to="{ name: 'model', query: { model: model.model_no } }"
            @click="modelStore.hidden()"
            class="model-option-item"
            :style="{
              background: model.acc_year == (new Date()).getFullYear() ? 'linear-gradient(to right bottom, #2f65ba, #6e41be)' : 'gray'
            }"
          >
            <span class="model-option-no">
              {{ model.model_no }}
            </span>
          </RouterLink>
        </TransitionGroup>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
#brand-model-popup {
  --el-color-primary: green;
  --el-bg-color: rgba(45, 54, 83, 0.8);

  &:deep(.el-dialog) {
    border-radius: 2vh;
    box-shadow: 0 0 10px white;
  }

  &:deep(.el-dialog__title) {
    color: white;
    font-size: 2.5vh;
    font-weight: normal;
  }

  &:deep(.el-dialog__close) {
    color: white;
    font-size: 2.5vh;
  }

  .model-search {
    display: flex;
    justify-content: center;
    align-items: center;

    &:deep(.el-input__wrapper) {
      background-color: black;
    }

    &:deep(.el-input__inner) {
      color: #ccc;
    }
  }

  .model-option {
    max-height: 72vh;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    position: relative;

    .model-option-item {
      width: 31%;
      height: 5vh;
      margin: 1%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 2vh;
      cursor: pointer;
      transition: all 0.25s ease-in-out;

      &:hover {
        box-shadow: 0 0 10px white;
        filter: hue-rotate(15deg) saturate(200%);
      }

      .model-option-no {
        color: white;
        font-size: 2.5vh;
        font-weight: normal;
      }
    }
  }

  .fade-enter-active, .fade-leave-active, .fade-move {
    transition: all 0.25s ease-in-out;
  }

  .fade-enter-from, .fade-leave-to {
    opacity: 0;
  }

  .fade-enter-to, .fade-leave-from {
    opacity: 1;
  }

  .fade-leave-active {
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>